import React, {Component} from 'react';
import {Form, Input, InputNumber, Select} from "antd";
import Lng from "../common/lng";

class AddDishSpecForm extends Component {

    state = {
        method: 0
    }

    onChange(value) {
        this.setState({
            method: value
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        return (
            <Form>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishSpec.method")}
                >
                    {getFieldDecorator('method', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("dishSpec.method")})
                        }]
                    })(
                        <Select onChange={this.onChange.bind(this)}>
                            <Select.Option key={"1"} value={1}>{Lng.get("dishSpec.area")}</Select.Option>
                            <Select.Option key={"2"} value={2}>{Lng.get("dishSpec.volume")}</Select.Option>
                            <Select.Option key={"3"} value={3}>{Lng.get("dishSpec.count")}</Select.Option>
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishSpec.code")}
                >
                    {getFieldDecorator('code', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.code")})
                        }]
                    })(
                        <Input/>
                    )}
                </Form.Item>
                {
                    this.state.method == 1 ?
                        <div>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.length")}
                            >
                                {getFieldDecorator('length', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.length")})
                                    }]
                                })(
                                    <InputNumber min={0}/>
                                )}
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.width")}
                            >
                                {getFieldDecorator('width', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.width")})
                                    }]
                                })(
                                    <InputNumber min={0}/>
                                )}
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.unit")}
                            >
                                {getFieldDecorator('sizeUnit', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.select", {some: Lng.get("dishSpec.unit")})
                                    }]
                                })(
                                    <Select>
                                        <Select.Option key={"".uuid()}
                                                       value={"M"}>{Lng.get("dishSpec.M")}</Select.Option>
                                        <Select.Option key={"".uuid()}
                                                       value={"CM"}>{Lng.get("dishSpec.CM")}</Select.Option>
                                        <Select.Option key={"".uuid()}
                                                       value={"MM"}>{Lng.get("dishSpec.MM")}</Select.Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </div> : (this.state.method == 2 ?
                        <div>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.volume")}
                            >
                                {getFieldDecorator('volume', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.volume")})
                                    }]
                                })(
                                    <InputNumber min={0}/>
                                )}
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.unit")}
                            >
                                {getFieldDecorator('volumeUnit', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.select", {some: Lng.get("dishSpec.unit")})
                                    }]
                                })(
                                    <Select>
                                        <Select.Option key={"".uuid()}
                                                       value={"L"}>{Lng.get("dishSpec.L")}</Select.Option>
                                        <Select.Option key={"".uuid()}
                                                       value={"ML"}>{Lng.get("dishSpec.ML")}</Select.Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </div> : this.state.method == 3 ? <div>
                            <Form.Item
                                {...formItemLayout}
                                label={Lng.get("dishSpec.count")}
                            >
                                {getFieldDecorator('count', {
                                    rules: [{
                                        required: true,
                                        message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.count")})
                                    }]
                                })(
                                    <InputNumber min={0}/>
                                )}
                            </Form.Item>
                        </div> : null)
                }

            </Form>
        )
    }
}

const _AddDishSpecForm = Form.create()(AddDishSpecForm);
export default _AddDishSpecForm;